<trackinglines>
    <style>
        .trackingline{
            outline: 1px solid yellow;
            opacity: 0.5;
            position: absolute;
            display: block;
        }
    </style>
    <span id="tooltip-span"></span>
    <div class="trackingline" ref="v_line" ></div>
    <div class="trackingline" ref="h_line" ></div>
    <script>
        var tag = this;
        var canvas = $('#work-canvas');
        this.on('mount', function () {
            var canvas = $('#work-canvas');
            var canvasContainer = $("#canvas-container");

            $(tag.refs["h_line"]).width(imgSelected.size.scaledWidth > canvasContainer.width() ? imgSelected.size.scaledWidth : canvasContainer.width() );
            $(tag.refs["v_line"]).height(imgSelected.size.scaledHeight > canvasContainer.height() ? imgSelected.size.scaledHeight : canvasContainer.height() );

            canvas.mousemove(function (event) {

                $("#tooltip-span").show();
                $(tag.refs["h_line"]).show();
                $(tag.refs["v_line"]).show();
                //TODO: replace with myCanvas.point(event.x, event.y);
                var cordinates = getCordinates(event, canvas);
                $("#tooltip-span").css({
                    "left": cordinates.x + 15 + "px",
                    "top": cordinates.y + 15 + "px"
                });
                $("#tooltip-span").html("x:" + cordinates.x + "<br> y:" + cordinates.y);
                $(tag.refs["h_line"]).css({
                    top: cordinates.y
                });
                $(tag.refs["v_line"]).css({
                    left: cordinates.x
                });

            })

            canvas.mouseout(function (event) {
                $("#tooltip-span").hide();
                $(tag.refs["h_line"]).hide();
                $(tag.refs["v_line"]).hide();
            });


        });

        this.on("trackinglines_update",function(values){
          update_h_v_line(values);
        })

        function update_h_v_line(values){
          var canvasContainer = $("#canvas-container");
          $(tag.refs["h_line"]).width(values.width > canvasContainer.width() ? values.width : canvasContainer.width() );
          $(tag.refs["v_line"]).height(values.height > canvasContainer.height() ? values.height : canvasContainer.height() );
        }

    </script>
</trackinglines>
